<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Button, Progress, message } from "ant-design-vue";
import { useRouter } from "vue-router";

const router = useRouter();
const countdown = ref(10); // 倒计时初始值
let timer: number | null = null;

// 倒计时逻辑
const startCountdown = () => {
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer!);
      message.info("即将返回首页...");
      router.push("/");
    }
  }, 1000);
};

// 返回首页
const goToHome = () => {
  if (timer) clearInterval(timer);
  router.push("/");
};

// 组件挂载时启动倒计时
onMounted(() => {
  startCountdown();
});
</script>

<template>
  <div
    class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-50 to-purple-50 bg"
  >
    <div class="bg-white p-8 rounded-lg shadow-2xl max-w-md w-full text-center">
      <h1 class="text-3xl font-bold text-gray-800 mb-4">暂未开放</h1>
      <p class="text-gray-600 mb-6">该功能正在开发中，敬请期待！</p>

      <!-- 倒计时进度条 -->
      <div class="mb-6">
        <Progress
          :percent="(10 - countdown) * 10"
          :stroke-color="{
            '0%': '#3b82f6',
            '100%': '#8b5cf6',
          }"
          :show-info="false"
        />
        <p class="text-sm text-gray-500 mt-2">
          {{ countdown }} 秒后自动返回首页
        </p>
      </div>

      <!-- 返回首页按钮 -->
      <Button
        type="primary"
        size="large"
        class="w-full bg-blue-600 hover:bg-blue-700 transition-colors"
        @click="goToHome"
      >
        立即返回首页
      </Button>
    </div>
  </div>
</template>

<style scoped>
.bg {
  background-image: url("@/assets/image/not.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #f5f5f5;
  min-height: 100vh;
  overflow: hidden;
}
/* 自定义动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.undeveloped-container {
  animation: fadeIn 0.5s ease-in-out;
}
</style>
